<template>
    <div class="big">
        <!-- 导航栏 -->
        <div class="navigation">
            <div class="icon" @click="back">
                <img src="../../assets/home-img/返回1.png" alt="">
            </div>
            <h2 class="title">
                {{ recommendDetail.title }}
            </h2>
            <div class="icon">
                <img src="../../assets/home-img/分享1.png" alt="">
            </div>
        </div>
        <!-- 问题 -->
        <div class="problem">
            {{ recommendDetail.title }}
        </div>
        <!-- 病情描述 -->
        <div class="describe">
            <span>病情描述:&ensp;(男, 37岁){{ recommendDetail.title }}</span>
            <p>
                发布于&ensp; 2024-12-25&nbsp;
                <img src="../../assets/home-img/眼睛.png" alt="">5210
            </p>
        </div>
        <!-- 医生 -->
        <div class="doctor">
            <div class="doctor-l">
                <img :src="recommendDetail.avatar" alt="">
            </div>
            <div class="doctor-r">
                <div class="top">
                    <span style="font-size: 27px;">{{ recommendDetail.name }}</span>&nbsp;
                    <img src="../../assets//home-img/v标.png" alt="">&nbsp;
                    <span style="color: #959595; font-size: 27px;">{{ recommendDetail.position }}</span>&nbsp;
                    <span>三甲</span>
                </div>
                <div class="bottom">
                    <span>泌尿外科</span>&nbsp;
                    <span>邹平县中医院</span>
                </div>
            </div>
        </div>
        <!-- 病情分析 -->
        <div class="disease">
            <p>
                <span>病情分析:</span>&ensp;{{ msgtext }}
            </p>
            <p>
                <span>病情建议: </span>&ensp;{{ msgtext }}
            </p>
        </div>
        <!-- 友情提示 -->
         <div class="tips">
            友情提示: 以上内容仅供参考, 具体诊疗请遵循医生指导, 妙手医生版权所有, 未经许可不得转载
         </div>
         <!-- 广告 -->
          <div class="advertisement">
            <img src="../../assets/home-img/推荐截图_02.png" alt="">
          </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import http from "../../http/http";

const route = useRoute();
const router = useRouter();
const id = route.query.id;
const recommendDetail = ref([]);
const msgtext = ref('');
const getRecommendDetail = async () => {
    await http.get(`/DownDoctorList?id=${id}`).then(res => {
        recommendDetail.value = res.data.data;
        msgtext.value=recommendDetail.value.content[0].word
    })
}

const back = () => {
    router.back();
}

onMounted(() => {
    getRecommendDetail();
}) 
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.big {
    width: 100%;
    height: 100vh;

    .navigation {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;

        .icon {
            margin: 0 20px;

            img {
                width: 50px;
                height: 50px;
                border-radius: 27.5px;
            }
        }

        .title {
            font-size: 40px;
            width: 60%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            div {
                width: 100%;
            }
        }
    }

    .problem {
        width: 100%;
        font-size: 35px;
        font-weight: bold;
        line-height: 80px;
        padding: 0 20px;
    }

    .describe {
        width: 100%;
        padding: 0 20px;

        span {
            color: #626262;
        }

        p {
            width: 100%;
            height: 50px;
            margin-top: 10px;
            display: flex;
            align-items: center;

            img {
                width: 30px;
                height: 30px;
            }
        }
    }

    .doctor {
        width: 100%;
        padding: 0 20px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

        .doctor-l {
            width: 13%;

            img {
                width: 75px;
                height: 75px;
            }
        }

        .doctor-r {
            flex: 1;

            .top {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                line-height: 40px;

                img {
                    width: 25px;
                    height: 25px;
                }
            }

            .bottom {
                line-height: 40px;
                display: flex;
                justify-content: flex-start;
            }
        }
    }

    .disease {
        width: 95%;
        margin: 15px auto;
        padding: 10px 15px;
        background-color: #f8f8f8;
        letter-spacing: 1px;

        p {
            width: 100%;
            margin-bottom: 10px;

            span {
                color: #215aff;
            }
        }
    }

    .tips {
        width: 95%;
        margin: 0 auto;
        color: #8c8c8c;
    }

    .advertisement {
        width: 100%;
        margin-top: 20px;

        img {
            width: 100%;
        }
    }
}
</style>
